<template>
  <div class="tabbar" v-if="tab">
    <div class="tabBar_con">
      <div
        :class="{ bar: true, selectt: selectIndex == index }"
        v-for="(item, index) in items"
        :key="index"
        @click="changeBar(index)"
      >
        <i :class="item.iconName"></i>
        <div>{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      selectIndex: 0,
    };
  },
  methods: {
    changeBar(index) {
      this.$router.replace(this.items[index].to);
      this.selectIndex=index;
    },
  },
  props:["items"],
  computed: {
    tab(){
      return this.$store.state.tab
    }
  }
};
</script>

<style lang="less">
.tabbar {
  height: 44px;
  width: 375px;
  .tabBar_con {
    width: 100%;
    height: 44px;
    background-color: white;
    border-top:1px solid gray;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0px;
    z-index: 999;
    .selectt{
      color:rgb(49,144,232);
    }
    .bar{
      text-align: center;
      i{
        font-size: 20px;
      }
      div{
        font-size: 14px;
      }
    }
  }
  
}
</style>